<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<style>
  .container1 {
    width: 100%;
    height: 100px;
    align-items: center;

    /*元素水平居中*/
    margin-top: 30px;
    margin-bottom: 30px;

  }

  .first {
    display: flex;
    flex-direction: row;
    text-align: left;
  }

  .name1 {
    font-size: 16px;
  }

  .name2 {
    font-size: 16px;
  }

  .name3 {
    font-size: 16px;
  }



  .button1 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button2 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button3 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .button4 {
    background-color: rgb(48, 43, 43);
    color: white;
  }

  .container2 {
    width: 100%;
    height: 600px;
    align-items: center;

    /*边框*/
    /*元素水平居中*/
  }

  .demo-ruleForm {
    width: 40%;
  }

  .block {
    text-align: center;
  }
</style>

<body>

  <div id="app">

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="销售日期：">
        <el-date-picker v-model="formInline.date" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item label="销售总量：">
        <el-input-number v-model="formInline.total" placeholder="销售总量"></el-input-number>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search2">查询</el-button>
        <el-button type="primary" @click="getall">全部</el-button>

      </el-form-item>
    </el-form>
    <div class="container2">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="销售列表" name="first">
          <el-table ref="multipleTable" border :data="filtedsellList" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column prop="selldate" label="销售日期" show-overflow-tooltip>
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{  getDate(scope.row.selldate) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建日期" show-overflow-tooltip>
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{  getDate(scope.row.date) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="price" label="销售单价(元)" width="120">
            </el-table-column>
            <el-table-column prop="marketprice" label="销售市场价(元)" show-overflow-tooltip>
            </el-table-column>


            <el-table-column prop="sellcount" label="销售总量" show-overflow-tooltip>
            </el-table-column>

            <el-table-column prop="total" label="销售收入" show-overflow-tooltip>
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{  scope.row.price *   scope.row.sellcount}}</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="220">
              <template slot-scope="scope">

                <el-button size="small" @click.native.prevent="deleteRow(scope.$index, filtedsellList)">
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>

        </el-tab-pane>
        <el-tab-pane label="添加销售记录" name="second">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="销售数量" prop="name">
              <el-input-number v-model="ruleForm.sellcount" :step="100"></el-input-number>
            </el-form-item>

            <el-form-item label="单价">
              <el-input v-model="ruleForm.price"></el-input>
            </el-form-item>
            <el-form-item label="市场单价">
              <el-input v-model="ruleForm.marketprice"></el-input>
            </el-form-item>
            <el-form-item label="创建日期">
              <el-date-picker v-model="ruleForm.date" value-format="yyyy-MM-dd HH:mm:ss" type="date"
                placeholder="选择日期时间">
            </el-form-item>
            <el-form-item label="销售时间">
              <el-date-picker v-model="ruleForm.selldate" value-format="yyyy-MM-dd HH:mm:ss" type="date"
                placeholder="选择日期时间">
            </el-form-item>

            </el-date-picker>
            <el-form-item>
              <el-button @click="createrec" type="success" size="small">创建销售记录 </el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

    </div>
  </div>

</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      eated: 0,
      alertUser: false,
      alertForm: {
        id: 2,
        name: '',
        password: '',
        phone: '',
        address: '',
        info: '',
      },
      ruleForm: {
        date: "",
        selldate: "",
        sellcount: 100,
        price: '',
        marketprice: '',
      },

      formInline: {
        total: '',
        date: ''
      },

      activeName: 'first',
      sellList: [],
      filtedsellList: [],

      multipleSelection: [],
      currentPage3: 5,
    },
    mounted() {
      this.getSell();
    },
    methods: {
      getall() {
        this.filtedsellList = this.sellList
      },
      dateFormat(fmt, date) {
        let ret;
        const opt = {
          "Y+": date.getFullYear().toString(),        // 年
          "m+": (date.getMonth() + 1).toString(),     // 月
          "d+": date.getDate().toString(),            // 日
          "H+": date.getHours().toString(),           // 时
          "M+": date.getMinutes().toString(),         // 分
          "S+": date.getSeconds().toString()          // 秒
          // 有其他格式化字符需求可以继续添加，必须转化成字符串
        };
        for (let k in opt) {
          ret = new RegExp("(" + k + ")").exec(fmt);
          if (ret) {
            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
          };
        };
        return fmt;
      },
      getDate(date) {
        Date.prototype.Format = function (fmt) { // author: meizz
          var o = {
            "M+": this.getMonth() + 1, // 月份
            "d+": this.getDate(), // 日
            "h+": this.getHours(), // 小时
            "m+": this.getMinutes(), // 分
            "s+": this.getSeconds(), // 秒
            "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
            "S": this.getMilliseconds() // 毫秒
          };
          if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
          for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
          return fmt;
        }
        return new Date(date).Format("yyyy-MM-dd");
      },
      updatefeed() {
        axios.post("/altUser", this.alertForm).then(res => {
          console.log(res.data)
          if (res.data.result == "ok") {
            this.$notify.success({
              title: '成功',
              message: '修改员工信息成功'
            })
            console.log(res.data)
            return;
          }
        })
      },
      createrec() {
        console.log(this.ruleForm);
        axios.post("/sell/addSellInfo", this.ruleForm).then(res => {
          console.log(res.data)
          if (res.data.result == "1001") {
            this.$notify.success({
              title: '成功',
              message: '添加销售成功'
            })
            this.getSell();
            console.log(res.data)
            return;
          }
        })
      },
      search() {
        var newlist = []
        var searchdate = this.formInline.date
        this.sellList.forEach(ele => {
          var da = this.getDate(ele.selldate);
          console.log(da);
          console.log(searchdate)
          if (da == searchdate) {
            newlist.push(ele)
          }
        })
        this.filtedsellList = newlist;
      },
      search2() {
        var newlist = []
        this.sellList.forEach(ele => {
          console.log(ele.total)
          if (ele.sellcount == this.formInline.total) {
            newlist.push(ele)
          }
        })
        this.filtedsellList = newlist;
      },
      getSell() {
        this.sellList = []
        axios.post("/sell/getAllSellInfo", {}).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            res.data.data.forEach(ele => {
              this.sellList.push(ele)
            })
            this.filtedsellList = this.sellList;
          }
          console.log(this.userList)
        })
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleClick(tab, event) {

      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
      deleteRow(index, rows) {
        axios.post("/sell/delSell", { id: rows[index].id }).then(res => {
          console.log(res);
          if (res.data.result == "1001") {
            this.$notify.success({
              title: '删除成功',
              message: '删除成功！'
            })
            this.getSell();
          } else {
            this.$notify.success({
              title: '删除失败',
              message: '删除失败！'
            })
          }
        })
      },
      alertRow(index, row) {
        this.alertUser = true;
        this.alertForm.id = row[index].id;
        this.alertForm.name = row[index].name;
        this.alertForm.phone = row[index].phone;
        this.alertForm.address = row[index].address;
        this.alertForm.info = row[index].info;
        this.alertForm.password = row[index].password;
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  })
</script>

</html>